<template>
    <div>
        <h1>房型显示</h1>
        名称: <input type="text" v-model="t.name">
        <input type="button" value="查询" class="btn btn-primary" @click="show">
        <input type="button" value="下架" class="btn btn-primary" @click="UpDoen(0)">
        <input type="button" value="上架" class="btn btn-primary" @click="UpDoen(1)">

        <table class="table table-bordered">
            <tr>
                <td><input type="checkbox" v-model="checkAll" @click="QuanFan"></td>
                <td>房号名称</td>
                <td>房型</td>
                <td>房态</td>
                <td>状态</td>
            </tr>
            <tr v-for="item in list">
                <td><input type="checkbox" :value="item.id" v-model="ids"></td>
                <td>{{ item.name }}</td>
                <td>{{ item.test }}</td>
                <td>{{ item.houseT }}</td>
                <td>{{ item.state == 0 ? '下架' : '上架' }}</td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let router = useRouter();
let route = useRoute();

let data: any = reactive({
    t: {
        "houseTypeName": "",

    },
    ids: [],
    list: [],

    checkAll: false,
});

let { t, ids, list, checkAll } = toRefs(data);

const QuanFan = () => {
    checkAll.value = !checkAll.value;
    if (checkAll.value == true) {
        ids.value = list.value.map((item: any) => {
            return item.id;
        })
    } else {
        ids.value = [];
    }
}

onMounted(() => {
    show();
})

const show = () => {
    let obj = {
        "name": t.value.name,

    }
    axios({
        url: '/api/HouseNumber/HouseList',
        method: 'get',
        params: obj
    }).then((res) => {
        list.value = res.data.data;

    })
}


const UpDoen = (state: any) => {
    if (ids.value.length <= 0) {
        alert("请选择要操作的数据");
        return;
    }
    let res = confirm("确定要操作吗？");
    if (res) {
        let obj = {
            ids: ids.value.toString(),
            state: state
        }
        axios({
            url: '/api/HouseNumber/StateAll',
            method: 'put',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert(" 操作成功");
                checkAll.value = false;
                show();
            }
            else {
                alert(" 操作失败");
                return;
            }
        })
    }

}






</script>

<style scoped></style>